.right_box_text {
    &:active {
        opacity: 0.7;
    }
}
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.groupMembers {
    width: 750rpx;
    height: calc(100vh + 1px);
    background: #f5f5f5;

    .content {
        position: fixed;
        width: 750rpx;
        left: 0;
        right: 0;
        // bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        // bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        bottom: 0;
        background: #f5f5f5;
        .card {
            width: 710rpx;
            margin: 20rpx auto;
            padding: 20rpx 35rpx;
            background: #fff;
            border-radius: 20rpx;
            .msg {
                margin-left: 20rpx;
            }
            .u_name {
                font-size: 30rpx;
                font-weight: 600;
                color: #666;
                margin-bottom: 10rpx;
            }

            .status_box{
                position:absolute;
                top:0;
                right:0;
                color:#ccc;
                .icon{
                    font-size:30rpx;
                }
            }

            .sexage {
                align-self: flex-start;
            }

            .collect {
                margin-top: 13rpx;
                .title {
                    .text {
                        font-size: 30rpx;
                        color: #333;
                        line-height: 42rpx;
                    }
                }
                .imgs {
                    width: 680rpx;
                    margin-top: 15rpx;
                    flex-wrap: wrap;
                    gap: 20rpx;
                    .img {
                        border-radius: 20rpx;
                    }
                    .L1{
                            width:350rpx;
                            height:350rpx;
                        }
                    .L2{
                            width:250rpx;
                            height:250rpx;
                        }
                    .L3{
                            width: 200rpx;
                            height: 200rpx;
                        }
                }

                .desp {
                    margin-top: 10rpx;
                    .online{
                        font-size:24rpx;
                        color:#1DC691;
                    }
                    .text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }

                .controls {
                    margin-top: 15rpx;
                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .text {
                        font-size: 28rpx;
                        color: #999;
                        margin-left: 10rpx;
                    }

                    .more{
                        width: 60rpx;
                        height: 40rpx;
                        background: rgba(0,0,0,0.06);
                        border-radius: 6rpx;
                        justify-content: center;
                        gap:10rpx;
                        .dian{
                            width: 8rpx;
                            height: 8rpx;
                            background: #999;
                            border-radius: 4rpx;
                        }
                    }
                }
            }
        }
        .heightBox {
            min-height:20rpx;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
        }
        .nodata {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;

            .img {
                width: 560rpx;
                height: 560rpx;
            }
            .desp {
                margin-top: 20rpx;
                width: 560rpx;
                .text {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
}

.popup_box{
    width:750rpx;
    border-top-left-radius:20rpx;
    border-top-right-radius:20rpx;
    background:#fff;
    overflow:hidden;
    .icon{
        font-size:60rpx;
        color:#666;
    }
    .controls {
        margin-top: 55rpx;
        margin-bottom:50rpx;
        .control {
            width:180rpx;
        }
        .text {
            font-size: 28rpx;
            color: #333;
            margin-top: 40rpx;
            text-align: center;
            &.text1{
                margin-top:0;
            }
        }

        
    }
    .bottom_button {
        width:750rpx;
        height:100rpx;
        background:#fff;
        .text {
            color: #333;
            font-size:32rpx;
        }
    }

    .heightBox {
            min-height:20rpx;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
        }
}
.slim_drawer_shadow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: #000;
    opacity: 0;
	/*
    transition-property: opacity;
    transition-duration: 0.15s;
	*/
   transition: all linear .15s;
    &.active {
        opacity: 0.5;
    }
}

.slim_drawer {
    position: fixed;
    z-index: 201;
    width: 750rpx;
    height: 1400rpx;
    bottom: 0;
    background: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
	transition: all linear .15s;
	/*
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
	*/

    transform: translateY(1400rpx);

    .title {
		display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100rpx;

        .left_button {
			display: flex;
            position: absolute;
            top: 25rpx;
            left: 30rpx;
            width: 50rpx;
            height: 50rpx;
            background: #eee;
            border-radius: 35rpx;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .arrow {
                width: 25rpx;
                height: 25rpx;
            }
        }
        .text {
            color: #333;
            font-size: 30rpx;
        }
    }

    .sub_title {
		
        height: 60rpx;
        flex-direction: row;
        align-items: center;
        margin-top: 20rpx;
        .text {
            font-size: 26rpx;
            color: #333;
            font-weight: 600;
        }
    }

    .search_box {
		display: flex;
        width: 690rpx;
        height: 70rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        margin-bottom: 20rpx;
        .search_icon {
            width: 40rpx;
            height: 40rpx;
        }

        .inp {
            flex: 1;
            margin: 0 10rpx;
        }

        .clear_icon {
            width: 50rpx;
            height: 50rpx;
        }
    }

    .near_forward {
        .near_forward_list {
            flex-direction: row;
            height: 140rpx;
            margin-top: 20rpx;
            .box {
                width: 100rpx;
                height: 150rpx;
                justify-content: center;
                align-items: center;
                margin-right: 42rpx;
                .head {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50rpx;
                }

                .text_box {
                    width: 100rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    margin-top: 10rpx;

                    .text {
                        font-size: 24rpx;
                        text-align: center;
                        color: #666;
                    }
                }
            }
        }
    }

    .list_area {
        position: absolute;
        width: 750rpx;
        top: 100rpx;
        left: 0;
        bottom: 0rpx;
        margin-top: 20rpx;
        .paddingBox {
            padding: 0 30rpx;
        }
        .row {
			display: flex;
            flex-direction: row;
            align-items: center;
            height: 100rpx;
            &:active {
                background: #f5f5f5;
            }
            .head {
                width: 80rpx;
                height: 80rpx;
                border-radius: 40rpx;
            }

            .name {
                color: #333;
                font-size: 28rpx;
                margin-left: 20rpx;
            }
        }
    }
}
.dialog_box {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .dialog_shadow {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: 0.5;
    }

    .dialog_content {
		z-index: 1001;
        width: 600rpx;
        background: #fff;
        border-radius: 10rpx;
        .paddingBox {
            padding: 30rpx;
        }
        .forward_to {
            margin-top: 20rpx;
            flex-direction: row;
            align-items: center;
            .head {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50rpx;
            }

            .text_box {
                flex: 1;
                line-height: 40rpx;
                margin-left: 20rpx;
                .text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
            padding-bottom: 20rpx;
            border-bottom: 1px solid #eee;
        }

        .forward_content {
			display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 20rpx;
            .text_box {
                width: 540rpx;
                .text {
                    color: #666;
                }
            }

            .img {
                border-radius: 10rpx;
            }

            .video_box {
				display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .video_img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 10rpx;
                }

                .video_play {
                    width: 36px;
                    height: 36px;
                }
            }
        }

        .btns {
			display: flex;
            flex: 1;
            border-top: 1px solid #eee;
            flex-direction: row;

            .btn {
                flex: 1;
                height: 100rpx;
				display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                &:active {
                    opacity: 0.7;
                    background: #f5f5f5;
                }
            }

            .btn1 {
                border-right: 1px solid #eee;
                .text {
                    color: #666;
                    font-weight: 600;
                }
            }

            .btn2 {
                .text {
                    color: $slim-main;
                    font-weight: 600;
                }
            }
        }
    }
}